<template>
    <el-card class="card">
        <span class="pbtn"></span>
        <span style="font-size: 20px; margin-bottom: 20px;">角色管理
            <span style="margin-left:75%;">
                <el-button type="primary" style="width: 120px;height:50px;border-radius: 20px;">保存</el-button>
            </span>
        </span>
        <div class="main">
            <el-card shadow="never" style="width:40%; margin-right: 20px;height: 92vh;">
                <span>角色</span>
                <span style="margin-left: 55%;">
                    <el-button link type="primary" @click="addRoles">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        新增角色
                    </el-button>
                </span>
                <el-table :data="getAllRoleList" style="width: 100%;">
                    <el-table-column align="center" prop="name" label="名称" width="180" />
                    <el-table-column align="center" prop="address" label="操作">
                        <template #default="{ row }">
                            <el-icon style="font-size: 20px;color: rgb(61, 135, 226);">
                                <Edit @click="editRole(row)" />
                            </el-icon>
                            <el-icon style="font-size: 20px;margin-left: 20px;color:rgb(217, 82, 82);">
                                <Delete @click="deleteRole(row.id)" />
                            </el-icon>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <el-card title="管理角色权限" shadow="never" style="width:75%;">
                <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange"
                    style="margin-bottom: 20px;">全选</el-checkbox>
                <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange" class="aaaa">
                    <el-checkbox v-for="(city, index) in getAllRoleList" :key="city" :label="city.id"
                        @change="handleCheckAllChange2($event, index)" v-model="checkAll2" :indeterminate="isIndeterminate2"
                        style="margin: 30.5px 0px;margin-right: 200px;">{{
                            city.name
                        }}
                        <el-checkbox-group v-model="checkedCities2" @change="handleCheckedCitiesChange2($event, index)"
                            style="margin: 31px 0px;margin-top: 20px;">
                            <el-checkbox v-for="city1 in city.arr" :key="city1.id" :label="city.id + city1.id">{{ city1.name
                            }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-checkbox>
                </el-checkbox-group>
            </el-card>
        </div>
        <el-dialog v-model="roleDialogVisible" :title="title" width="40%" center>
            <span>
                <el-form :data="roleList" :model='roleList' label-width="70px">
                    <el-form-item label="角色名称">
                        <el-input v-model="roleList.name">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="角色介绍">
                        <el-input v-model="roleList.description" style="height: 100px;">
                        </el-input>
                    </el-form-item>
                    <el-form-item v-if="roleList.createTime" label="创建时间">
                        <el-text size="large">{{ roleList.createTime }}</el-text>
                    </el-form-item>
                    <el-form-item label="创建人">
                        <el-text size="large">{{ createName }}</el-text>
                    </el-form-item>
                </el-form>
            </span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelDialog">取消</el-button>
                    <el-button type="primary" @click="submitDialog">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </el-card>
</template>

<script lang='ts' setup>
import { onMounted, ref, markRaw, reactive } from 'vue'
import api from '@/api'
import { ElMessageBox, ElMessage } from 'element-plus'
import { QuestionFilled } from '@element-plus/icons-vue'
import { saveRoleType } from '@/types/ccc/roles'

const checkAll = ref(false)
const checkAll2 = ref(false)
const isIndeterminate = ref(false)
const isIndeterminate2 = ref(false)
const checkedCities = ref(['Shanghai', 'Beijing'])
const checkedCities2 = ref<Array<any>>([])
const handleCheckAllChange = (val: boolean) => {
    checkedCities.value = val ? getAllRoleList.value.map((item: any) => item.id) : []
    // console.log(checkedCities.value,checkedCities2.value);
    isIndeterminate.value = false
    checkedCities2.value = []
    checkedCities.value.forEach((item: any, index: any) => {
        console.log(item);
        handleCheckAllChange2(val, index)
    })
}
const handleCheckedCitiesChange = (value: string[]) => {
    const checkedCount = value.length
    checkAll.value = checkedCount === getAllRoleList.value.length
    isIndeterminate.value = checkedCount > 0 && checkedCount < getAllRoleList.value.length
    console.log(2);

}

const handleCheckAllChange2 = (val: boolean, index: any) => {
    // console.log(val);
    const arr = ref()
    arr.value = val ? getAllRoleList.value[index].arr.map((item: any) => {
        return getAllRoleList.value[index].id + item.id
    }) : []
    checkedCities2.value.push(...arr.value)
    // console.log(checkedCities2.value);
    console.log(1);
    if (!val) {
        checkedCities2.value = []
    }
    // isIndeterminate2.value = false
}
const handleCheckedCitiesChange2 = (value: string[], index: any) => {
    console.log(value, index);

    const checkedCount = value.length
    checkAll2.value = checkedCount === getAllRoleList2.value.length
    isIndeterminate2.value = checkedCount > 0 && checkedCount < getAllRoleList2.value.length
}
const getAllRoleList2 = ref([{ name: '查看待处理签约', id: 1 }, { name: '编辑待处理签约', id: 2 }, { name: '删除待处理签约', id: 3 }, { name: '导出待处理签约', id: 4 }])


const getAllRoleList = ref()
const roleDialogVisible = ref<boolean>(false)
const getAllRoleData = async () => {
    const result = await api.systemSetting.role.getAllRoleApi()
    console.log(result.data.data);
    getAllRoleList.value = result.data.data.map((item: any) => {
        return {
            ...item,
            arr: [{ name: '查看待处理签约', id: 1 }, { name: '编辑待处理签约', id: 2 }, { name: '删除待处理签约', id: 3 }, { name: '导出侍处理签约', id: 4 }]
        }
    })
}
onMounted(() => {
    getAllRoleData()
})
const roleList = reactive<saveRoleType>({
    name: '',   //姓名
    description: '',//描述	
    creatorId: '', //创建者登录id
    createTime: '',
})
const title = ref<string>('')
const createName = ref<string>('')



// 据登录者id查找创建人
// const getChcsRole = async (id: string) => {
//     const result = await api.systemSetting.role.getUmRoleApi(id)
//     console.log(result);

//     if (result.data.code === 200) {
//         createName.value = result.data.data.name
//     } else {
//         ElMessage.warning(result.data.msg)
//     }

// }
// 新增角色
const addRoles = () => {
    title.value = '新增角色'
    roleDialogVisible.value = true
    roleList.creatorId = localStorage.getItem('user_id')
    roleList.createTime = ''
    roleList.name = ''
    roleList.description = ''
}
// 编辑角色
const editRole = async (item: saveRoleType) => {
    console.log(item);
    roleList.id = item.id
    title.value = '编辑角色'
    roleDialogVisible.value = true
    roleList.name = item.name
    roleList.description = item.description
    roleList.createTime = item.createTime
    roleList.creatorId = item.creatorId
}
// item.creatorId

const getName = async () => {
    let result = await api.systemSetting.role.getUmRoleApi(localStorage.getItem('user_id') as string)
    createName.value = result.data.data.name
}
// 删除角色
const deleteRole = (id: string) => {
    ElMessageBox.confirm(
        '删除后无法恢复，确定要删除此条角色吗？',
        '删除确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            icon: markRaw(QuestionFilled)
        }
    )
        .then(async () => {
            const result = await api.systemSetting.role.delRoleApi(id)
            console.log(result)
            if (result.data.code === 200) {
                ElMessage.success(result.data.msg)
            } else {
                ElMessage.warning(result.data.msg)
            }
            getAllRoleData()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
const cancelDialog = () => {
    roleDialogVisible.value = false
}
getName()
// 提交对话框
const submitDialog = async () => {
    roleDialogVisible.value = false
    if (title.value === '新增角色') {
        console.log(roleList);
        const result = await api.systemSetting.role.saveRoleApi(roleList)
        console.log(result);
        if (result.data.code === 200) {
            ElMessage.success(result.data.msg)
        } else {
            ElMessage.warning(result.data.msg)
        }
    } else if (title.value == '编辑角色') {
        console.log(roleList);
        const result = await api.systemSetting.role.updateRole(roleList)
        if (result.data.code === 200) {
            ElMessage.success(result.data.msg)
        } else {
            ElMessage.warning(result.data.msg)
        }
    }
    getAllRoleData()
}

</script>

<style lang='scss' >
.card {
    width: 1150px;
    margin: auto;
    padding: 20px;
    box-sizing: border-box;
    background-color: white;
    min-height: 100vh;
}

.pbtn {
    display: inline-block;
    width: 8px;
    height: 18px;
    border-radius: 20px;
    background-color: #409eff;
    margin-right: 10px;
}

.main {
    @include flex(center, start, row);
    margin-top: 20px;
}

.aaaa>.el-checkbox>.el-checkbox__input>.el-checkbox__inner {
    margin-top: -50px;
}
</style>